<template>
	<cl-dialog
		title="管理部门"
		width="700px"
		:visible.sync="visible"
		@close="close"
		:props="{
			top: '5vh'
		}"
	>
		<cl-tabs-card :tabs="tabs" v-model="currTab" />
		<div class="mt-2">
			<zm-table v-if="currTab == 'cus'" v-bind="cusTable" :data="cusList">
				<cl-empty slot="empty" />
				<template #column-customer="{ scope: { row } }">
					<cl-customer :gender="row.cus_sex || 1" :name="row.cus_name || '111'" />
				</template>
			</zm-table>
			<div v-if="currTab == 'staff'" class="staff-list">
				<cl-empty v-if="!staffList.length" />
				<cl-customer
					v-for="(item, index) in staffList"
					:key="index"
					:gender="item.cus_sex || 1"
					:name="item.cus_name || '111'"
				/>
			</div>
		</div>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			currTab: "cus",
			tabs: [
				{ label: "客户", name: "cus" },
				{ label: "成员", name: "staff" }
			],
			cusList: [{}],
			staffList: [{}],
			cusTable: {
				"context-menu": [],
				autoHeight: false,
				columns: [
					{ label: "客户名称", prop: "customer", minWidth: 150 },
					{ label: "归属成员", prop: "user_name", minWidth: 150 },
					{ label: "添加时间", prop: "add_time", minWidth: 150 }
				]
			}
		};
	},
	methods: {
		open(type, row) {
			this.currTab = type;
			this.visible = true;
		},
		close() {
			this.visible = false;
		},
		reset() {
			this.saving = false;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog__body {
		max-height: 70vh;
		overflow: auto;
	}
}
.staff-list {
	display: flex;
	flex-wrap: wrap;
	::v-deep .cl-customer-info {
		width: auto;
		flex-direction: column;
		align-items: center;
		width: 70px;
		.cus-info {
			min-width: auto;
			padding-left: 0;
			margin-top: 10px;
			.cus-name .ellipsis {
				word-break: break-all;
				white-space: pre-wrap;
			}
		}
	}
}
</style>
